<template>
    <!-- 修改资料 -->

    <div>
        <!--  v-if="visible"  @click.self="handleClose" -->
        <!-- 内容主题区域 -->
        <el-form label-width="100px" :model="form" label-position="right" ref="formRef" :rules="formRules">
            <el-card class="initCard">
                <el-row>
                    <el-col :xs="24" :sm="24" :md="24" :lg="5" :xl="5">
                        <el-form-item label="评审表编号" prop="number">
                            <el-input v-model="form.number"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="9" :xl="9">
                        <el-form-item label="发行日期" prop="releaseDate">
                            <el-row :gutter="10">
                                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                                    <el-date-picker v-model="form.releaseDate" type="date" placeholder="请选择日期"
                                        value-format="YYYY-MM-DD" />
                                </el-col>
                                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                                    <el-time-picker v-model="form.releaseHour" value-format="HH:mm:ss"
                                        placeholder="请选择时间" />
                                </el-col>
                            </el-row>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="4" :xl="4">
                        <el-form-item label="完成期限" prop="completeDays">
                            <el-input style="width: 55%;" v-model="form.completeDays" type="number"></el-input>个工作日
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="3" :xl="3">
                        <el-form-item label="版本号" prop="sampleVersion">
                            <el-input v-model="form.sampleVersion"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>
            <el-card style="margin-top: 10px;">
                <el-tabs v-model="activeName">
                    <el-tab-pane label="营业部确认" name="first">
                        <busieOffice v-if="request" v-model="form" :configData="configData" disabled>
                        </busieOffice>
                    </el-tab-pane>
                    <el-tab-pane label="选材依据" name="second">
                        <selection v-if="request" v-model:formData="form" v-model:indexData="dataList"
                            :configData="configData" :tempList="tempList" disabled>
                        </selection>
                    </el-tab-pane>
                    <el-tab-pane label="样品附件" name="third">
                        <tsFormTable v-model="dtlList" disabled>
                            <template #tableContent>
                                <el-table-column prop="fileName" label="文件名"></el-table-column>
                                <el-table-column prop="fileFullPath" label="图片" width="100">
                                    <template #default="scope">
                                        <el-image v-if="checkType(scope.row) == 'image'" alt="上传图片"
                                            :src="scope.row.fileFullPath"
                                            @click="openDialog(scope.row.fileFullPath)"></el-image>
                                        <video v-else-if="checkType(scope.row) == 'video'" :src="scope.row.fileFullPath"
                                            controls style="width: 100%;height: 100%;"></video>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="fileKindName" label="类别">
                                </el-table-column>
                                <el-table-column prop="itemIndex" label="排序">
                                </el-table-column>
                                <el-table-column prop="remark" label="备注">
                                </el-table-column>
                            </template>
                        </tsFormTable>
                    </el-tab-pane>
                    
                    <el-tab-pane label="技术部确认" name="fourth">
                        <el-skeleton v-if="!request" :rows="10" />
                        <tdConfirm v-else v-model="form" :configData="configData" ></tdConfirm>
                    </el-tab-pane>
                    <el-tab-pane label="生产部确认" name="fifth">
                        <pdConfirm v-if="request" v-model="form" :configData="configData" ></pdConfirm>
                    </el-tab-pane>
                    <el-tab-pane label="品质部确认" name="sixth">
                        <qcConfirm v-if="request" v-model="form" :configData="configData" ></qcConfirm>
                    </el-tab-pane>
                </el-tabs>
            </el-card>
            <el-card style="margin-top: 5px; margin-bottom: 10px;">
                <el-form-item label="备注">
                    <el-input style="width: 700px;" v-model="form.remark" :autosize="{ minRows: 2 }" type="textarea"
                        placeholder="请输入" />
                </el-form-item>
            </el-card>

        </el-form>


        <div class="button-position">
            <el-button @click="updateVisible">取 消</el-button>
            <el-button type="primary" @click="addCust(formRef)">确 定</el-button>
        </div>
        <el-dialog v-model="dialogVisible">
            <img :src="dialogImageUrl" alt="Preview Image" w-full style="width: 100%;" />
        </el-dialog>
    </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
import { ElNotification } from 'element-plus';
import Api from '@/api/model/sample'
import busieOffice from './commpoent/busieOffice.vue';
import selection from './commpoent/selection.vue';
import tdConfirm from './commpoent/tdConfirm.vue';
import pdConfirm from './commpoent/pdConfirm.vue';
import qcConfirm from './commpoent/qcConfirm.vue';
import tsFormTable from '@/components/scFormTable/index.vue'
import { checkType } from '@/utils/checkType.js'
const emit = defineEmits(['updatetable'])
const props = defineProps({
    paramsData: {
        type: Object,
        defalut: {}
    }
})

const activeName = ref('first')
// 添加用户数据的对象
const form = ref({})
const request = ref(false)
const configData = ref([])
const dataList = ref([])
const tempList = ref([])
const dtlList = ref([])
const formRef = ref()
const addTemplate = ref({
})

const dialogImageUrl = ref()
const dialogVisible = ref(false)
const formRules = reactive({
    number: [
        { required: true, message: "请输入编号", trigger: "blur" }
    ],
    releaseDate: [
        { required: true, message: "请输入", trigger: "change" }
    ],
    completeDays: [
        { required: true, message: "请输入", trigger: "blur" }
    ],
    sampleVersion: [
        { required: true, message: "请输入", trigger: "blur" },
    ]
})

onMounted(() => {
    getInit()
})
const getInit = async () => {
    let res = await Api.audittable.edit.post(props.paramsData)
    console.log(res)
    if (res.code == '200') {
        configData.value = res.configData
        form.value = res.data
        addTemplate.value = res.file
        form.value.carbonBrushSpecArray = res.data.carbonBrushSpec.split(',')
        tempList.value = res.testRequireTemplate
        dataList.value = res.dataList
        request.value = true
    }

}
const openDialog = (val) => {
    dialogImageUrl.value = val
    dialogVisible.value = true
}
const updateIndex = () => {
    dataList.value.forEach((item, index) => {
        item.itemIndex = index + 1
    })
}
const updateVisible = (val) => {
    emit('updatetable')
}
const addCust = async (formRef) => {
    if (form.value.carbonBrushSpecArray[6] == '') {
        form.value.carbonBrushSpecArray[6] = '0'
    }
    form.value.carbonBrushSpec = form.value.carbonBrushSpecArray.toString()
    await formRef.validate((valid, fields) => {
        if (valid) {
            addCustData();
        }
    })
}

const addCustData = async () => {
    var params = {
        bean: form.value,
        dataList: dataList.value,
        dtlList: dtlList.value
    }
    console.log(params)
    var res = await Api.audittable.confirm.post(params);
    console.log(res)
    if (res.code == 200) {
        ElNotification.success({ title: '', message: '确认成功！', duration: 2000 });
        emit('updatetable', true);
    }
}


</script>
<style lang="less" scoped>
:deep(.el-card__body) {
    padding-top: 5px;
    padding-bottom: 0px;
}
</style>



